<template>
  <main>
    <template v-if="load_status">
      <div class="lbox">
        <div class="weizhi">
          您现在的位置是：<nuxt-link to="/">首页</nuxt-link>&nbsp;>&nbsp;<span
            >分享</span
          >
        </div>
        <v-progress-linear
          v-show="loading"
          indeterminate
          color="green"
        ></v-progress-linear>
        <div class="blogs">
          <ul>
            <li class="blogs_list" v-for="(s, i) in lastest" :key="i">
              <nuxt-link :to="'/view/' + s.id + '/1'" target="_blank">
                <i>
                  <v-img lazy-src="/occupying.png" :src="s.img"></v-img>
                </i>
                <h2>
                  {{ s.title }}
                </h2>
              </nuxt-link>
              <p>
                {{ s.descr }}
              </p>
              <div class="blogs_writer">
                阅读:{{ s.view }}
                <span class="blogs_time">{{ s.create_at }}</span>
              </div>
              <div class="blogs_tags">
                <nuxt-link
                  :to="'/share?keywords=' + l"
                  v-for="(l, i) in s.label"
                  :key="i"
                  v-show="i < 4"
                >
                  {{ l }}
                </nuxt-link>
              </div>
              <span class="blogs_lm">{{ s.type }}</span>
            </li>
          </ul>
        </div>
        <pagination :page="page" :pages="pages" @change_event="change_event" />
      </div>

      <aside class="rbox">
        <!-- <div class="ad">
        <a
          href="https://www.aliyun.com/minisite/goods?userCode=l1qstn8f&share_source=copy_link"
          target="_blank"
          ><img
            src="static/picture/ad2.jpg"
            alt="星星海SA2云服务器高性价比首选1核2G首年99元起"
        /></a>
      </div> -->
        <div class="hot_news">
          <p class="h_title">文章热榜</p>
          <ul>
            <li v-for="(s, i) in hot" :key="i">
              <nuxt-link :to="'/view/' + s.id + '/1'" target="_blank">
                <i>
                  <v-img lazy-src="/occupying.png" :src="s.img"></v-img> </i
                ><em>{{ i + 1 }}</em>
                <h2>{{ s.title }}</h2>
                <span>{{ s.create_at }}</span>
              </nuxt-link>
            </li>
          </ul>
        </div>
      </aside>
    </template>
    <!-- 错误反馈 -->
    <v-alert v-else dense outlined type="error">
      {{ system_error }}
    </v-alert>
  </main>
</template>

<script>
import axios from "../utils/axios"
import Cache  from '../utils/cache'
import {AuthRequest} from "../utils/auth"
export default {
  data() {
    return {
      hot: [],
      lastest: [],
      loading: true,
      load_status: true,
      system_error: "",
      page: 1,
      pages: 1,
      count: 0,
      keywords: "",
      info:{},
      Authorization:'',
    };
  },
  computed: {
    cur_query() {
      return this.$route.query;
    },
  },
  async asyncData({app, route,req,error }) {
    let keywords = route.query.keywords ? route.query.keywords : "";
    let page = route.query.page ? route.query.page : 1;
    return AuthRequest(req,'GET',"shares?page=" + page + "&keywords=" + encodeURI(keywords))
      .then((res) => {
        if (res.code != 200) {
          console.error(res)
          return error({statusCode:res.code})
        }
        const data = res.data;
        //seo
        const info = data.info
        app.head.title = info.title
        app.head.meta.push({
          name: "keywords",
          content: info.keyword,
        });
        app.head.meta.push({
          name: "description",
          content: info.descr,
        });
        //数据渲染
        return {
          loading: false,
          lastest: data.lastest,
          hot: data.hot,
          load_status: true,
          count: data.count,
          page,
          pages: data.pages,
          keywords,
          info,
          Authorization:data.Authorization,
        };
      })
      .catch((err) => {
        //console.error(err)
        return error({statusCode:err.code})
      });
  },
  watch: {
    cur_query(query) {
      this.page = 1;
      this.keywords = query.keywords ? query.keywords : "";
      this.load_list();
    },
  },
  mounted(){
    Cache.set('web_info',this.info,300)
    Cache.set("Authorization", this.Authorization, 3600*2);
  },
  methods: {
    change_event(page) {
      this.page = page;
      this.load_list();
    },
    load_list() {
      this.loading = true;
      axios
        .get(
          "shares?page=" + this.page + "&keywords=" + encodeURI(this.keywords)
        )
        .then((res) => {
          if (res.code != 200) {
            this.load_status = false;
            this.system_error = res.msg;
          } else {
            const data = res.data;
            this.loading = false;
            this.lastest = data.lastest;
            this.hot = data.hot;
            this.load_status = true;
            this.count = data.count;
            this.pages = data.pages;
          }
        });
    },
  },
};
</script>
<style scoped>
.blogs_lm {
  color: #ffff;
}
.nav {
  line-height: normal;
}
</style>
